<template>
    <div class="login-container">
        <el-form :show-message="false" class="login-form" :model="loginForm" ref="loginFormRef" :rules="rules"
            :inline="false" size="large">
            <el-form-item>
                <div class="login-title">
                    <div>
                        <img src="@/assets/loginLogo.png" alt="" style="width: 39px">
                    </div>
                    <div> 登录一下哦</div>
                </div>
            </el-form-item>
            <el-form-item prop="username">
                <el-input :maxlength="39" placeholder="请输入账号" v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input :maxlength="39" placeholder="请输入密码" type="password" v-model="loginForm.password"></el-input>
            </el-form-item>
            <el-form-item prop="captcha">
                <el-row style="width: 100%;">
                    <el-col :span="16" :offset="0">
                        <el-input @keyup.enter="onLogin" :maxlength="10" placeholder="请输入验证码"
                            v-model="loginForm.captcha"></el-input>
                    </el-col>
                    <el-col style="padding-left: 8px" :span="8" :offset="0">
                        <img class="images" :src="captchaImg" @click="getCaptchaImg" />
                    </el-col>
                </el-row>
            </el-form-item>
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-button v-if="isLogining" :disabled="isLogining" class="bottom-btn"
                        type="primary">登录中...</el-button>
                    <el-button v-else class="bottom-btn" type="primary" @click="onLogin">登录</el-button>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-button type="danger" plain class="bottom-btn" @click="onReset">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, type FormInstance } from "element-plus"
import { onMounted, reactive, ref } from "vue"
import { SysUserApi } from "../../api/user"
import { useUserStore } from "../../store/user"
import { useRouter } from 'vue-router'
import { tabStore } from "../../store/tabs"

const loginFormRef = ref<FormInstance>()
// 表单绑定对象
const loginForm = reactive({
    username: 'admin',
    password: 'admin',
    captcha: "6",
    uuid: ''
})


const isLogining = ref(false)
const rules = reactive({
    username: [
        {
            required: true,
            trigger: ["blur"],
            message: "请输入账户",
        },
    ],
    password: [
        {
            required: true,
            trigger: ["blur"],
            message: "请输入密码",
        },
    ],
    captcha: [
        {
            required: true,
            trigger: ["blur"],
            message: "请输入验证码",
        },
    ],
})

const captchaImg = ref('')
const getCaptchaImg = async () => {
    const res = await SysUserApi.captcha()
    console.log(res)
    if (res && res.code === 200) {
        captchaImg.value = res.data.captchaImg
        loginForm.uuid = res.data.uuid
    }
}

const userStore = useUserStore()
const tabStorePinia = tabStore()
const router = useRouter()
const onLogin = () => {
    loginFormRef.value?.validate().then(async valid => {
        if (valid) {
            isLogining.value = true
            try {
                const res = await SysUserApi.login(loginForm)
                if (res && res.code === 200) {
                    ElMessage.success('登录成功')
                    userStore.setUserId(res.data.userId)
                    userStore.setNickName(res.data.nickName)
                    userStore.setToken(res.data.token)
                    userStore.setIsAdmin(res.data.isAdmin)
                    tabStorePinia.clear()
                    router.push('/dashboard')
                }
                isLogining.value = false
            } catch {
                isLogining.value = false
            }
        }
    })
}

const onReset = () => {
    loginForm.username = ''
    loginForm.password = ''
    loginForm.captcha = ''
    getCaptchaImg()
}

onMounted(() => {
    getCaptchaImg()
})
</script>

<style scoped lang="scss">
.login-container {
    height: 100%;
    background-color: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;

    .login-form {
        height: 320px;
        width: 450px;
        padding: 20px 35px;
        border-radius: 10px;
        background-color: #fff;

        .login-title {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #606266;
            width: 100%;
            font-size: 24px;
            font-weight: 600;

            img {
                margin-right: 6px;
            }

            img:hover {
                transform: scale(1.3);
                transition: all 0.52s;
                cursor: pointer;
            }
        }

        .images {
            height: 38px;
            width: 100%;
            cursor: pointer;
            border: 1px solid #c6cad1;
            border-radius: 6px;
        }

        .bottom-btn {
            width: 100%;
        }
    }
}
</style>
